<template>
  <div class="status">
    <el-row class="titles" justify="space-between">
      <el-col :span="12">项目状态分布</el-col>
      <el-col :span="12" class="tabSpan">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="">
          <el-tab-pane label="按区域分布" name="AREA"></el-tab-pane>
          <el-tab-pane label="按行业分布" name="INDUSTRY"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row class="content">
      <el-col :span="8" class="contentChart">
        <div id="chartPie"></div>
        <div class="contentx">
          <p class="num">{{ totalPro }}</p>
          <p class="tips">项目总数(个)</p>
        </div>
      </el-col>
      <el-col :span="16" class="tablebox">
        <el-table
          :data="tableData"
          height="273"
          :summary-method="getSummaries"
          show-summary
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          ref="table"
        >
          <el-table-column
            prop="rowkey"
            align="left"
            :label="activeName == 'INDUSTRY' ? '行业' : '地区'"
          />
          <el-table-column prop="total" align="right" label="项目总数" />
          <el-table-column prop="notStarted" align="right" label="未开工" />
          <el-table-column prop="started" align="right" label="已开工" />
          <el-table-column prop="stopped" align="right" label="已停工" />
          <el-table-column prop="completed" align="right" label="已竣工" />
          <el-table-column
            prop="currentMonthAdded"
            align="right"
            label="本月新增"
          />
          <el-table-column
            prop="currentMonthCompleted"
            align="right"
            label="本月竣工"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'projectStatus',
  data() {
    return {
      activeName: 'AREA',
      tableData: [],
      totalPro: 0,
    }
  },
  props: ['areaId'],
  mounted() {
    this.getCountbystatusList('AREA')
    this.getCountbystatus()
  },
  watch: {
    areaId: {
      handler(val) {
        this.getCountbystatusList('AREA')
        this.getCountbystatus()
        return val
      },
      deep: true,
    },
  },
  methods: {
    handleClick(val) {
      this.getCountbystatusList(val.name)
    },
    drawPie(params) {
      const { id, color, data } = params
      let lineChart = echarts.init(document.getElementById(id))
      const colors = color || ['#6395FA', '#65DAAB', '#FFCC99', '#667798']
      lineChart.setOption({
        // title:{
        //     text: `{a|${params.total}}\n`+'{b|项目总数(个)}',
        //     left: '43%',
        //     bottom: '41%',
        //     textStyle:{
        //         rich:{
        //             a:{fontSize: '24',color: '#313A46'},
        //             b:{fontSize: '12',color: '#666',marginTop: '10px'},
        //         }
        //     }

        // },
        color: colors,
        grid: {
          top: '0',
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            name: '项目总数(个)',
            startAngle: 0, //饼图渲染的开始角度
            type: 'pie',
            radius: ['35%', '45%'],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: true,
                position: 'top',
                distance: 5,
                rich: {
                  a: {
                    lineHeight: 17,
                    align: 'right',
                    fontSize: 12,
                    with: 100,
                  },
                },
                formatter: `{b}： {c}个\n{a|{d}%}`,
              },
            },
            labelLine: {
              show: true,
              distance: 1,
            },
            emphasis: {
              radius: ['50%', '65%'],
              label: {
                show: true,
                fontWeight: 'bold',
              },
            },

            data: data,
          },
        ],
      })
      window.addEventListener('resize', () => {
        lineChart.resize()
      })
    },
    getCountbystatusList(type) {
      this.axios
        .post('api-p/project/expand/countbyareaorindustry', {
          areaId: this.areaId,
          countType: type,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.tableData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
    },
    getCountbystatus() {
      this.axios
        .post('api-p/project/expand/countbystatus', { areaId: this.areaId })
        .then((res) => {
          if (!res.data.hasError) {
            console.log(res.data)
            this.totalPro = res.data.result.total
            this.drawPie({
              id: 'chartPie',
              data: res.data.result.detail,
              total: res.data.result.total,
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += " 个";
        } else {
          sums[index] = 'N/A'
        }
      })
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
      return sums
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  th > .cell,
  td > .cell {
    padding: 7px 16px !important;
  }
}
/deep/ .el-tabs__active-bar {
  background-color: #409eff !important;
}
.status {
  margin-top: 10px;
  background-color: #fff;
  .titles {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e3e7e9;
    padding: 0 16px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    .tabSpan {
      text-align: right;
    }
  }
  .content {
    height: 305px;

    .contentChart {
      height: 100%;
      position: relative;
    }
    .contentx {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 11;
      height: 38px;
      transform: translate(-50%, -50%);
      text-align: center;
      .num {
        line-height: 26px;
        font-size: 26px;
        color: '#313A46';
      }
      .tips {
        line-height: 12px;
        font-size: 12px;
        color: #666;
      }
    }
    #chartPie {
      border-right: 1px solid #eef0f2;
      height: 100%;
    }
    .tablebox {
      padding: 15px;
    }
  }
}
/deep/.el-tabs__header {
  margin-bottom: 0;
  .el-tabs__nav {
    float: right;
  }
}
/deep/.el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
